<template>
  <el-row class="filter-box">
    <!-- <el-col :span="13" class="mr-2.5"> -->
    <el-form :model="auditForm" label-width="auto" inline style="max-width: 1200px">
      <el-form-item label="搜索内容:">
        <el-input v-model="auditAllSearch" placeholder="请输入搜索内容" />
      </el-form-item>
      <el-form-item label="事件类型:">
        <el-select
          v-model="eventType"
          clearable
          placeholder="请选择"
          style="width: 240px"
          class="ml-2.5"
          @clear="eventType = ''"
      >
        <el-option
            v-for="item in eventTypeSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        >{{ item.label }}
        </el-option>
      </el-select>
      </el-form-item>
      <!-- <el-form-item label="指纹特征:" v-if="convergeValue === 0">
        <el-input v-model="auditForm.feature" :style="auditFormLableWidth" placeholder="请输入搜索内容" />
      </el-form-item> -->
      <el-form-item label="日期选择:">
        <el-date-picker
          v-model="groupTimeString"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY-MM-DD"
          time-format="hh:mm:ss"
          @change="groupTimeChange"
      />
      </el-form-item>
      <div class="form-submit">
        <el-button type="primary" @click="formSubmit">搜索</el-button>
      </div>
    </el-form>
    
  </el-row>
  <HETTable
      ref="groupAuditLogTable"
      :pageSize="10"
      :tableFields="groupAuditLogFields"
      :tableData="groupAuditLogTableData"
      :headerOperation="headerOperation()"
      :enableSearch="false"
      :tableCheckbox="false"
      :total="groupAauditLogTotal"
      @getTableData="getGroupAuditLog"
  >
  </HETTable>
</template>

<script setup>
import {ref, reactive, nextTick, toRaw, onMounted, watch} from "vue";
import {useTreeStore} from "~/utils/pinia/tree.js";
import {ArrowLeft, Download, Plus, Upload} from "@element-plus/icons-vue";
import {
  req_getAuditLog,
  req_getGuardLogs,
  req_getGuardLogsCount,
} from "~/utils/axios/setting.js";
import HETTable from "~/components/common/HETTable.vue";
import moment from "moment";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import { URI } from "~/utils/axios/axios.js";

let $router = useRouter();
const successElMessage = () => {
  ElMessage({
    message: "设置成功",
    type: "success",
  });
};
let treeStore = useTreeStore();
if (JSON.stringify($router.currentRoute.value.query) == "{}") {
  treeStore.openTree();
}
/**
 *
 * tabs组件
 *
 * ***/
/**
 *
 * table组件
 *
 * ***/
// 搜索框
const auditAllSearch = ref('')
// 时间
const groupTimeString = ref(["", ""]);
// 事件类型
const eventType = ref('');

// 事件类型下拉框数据存放
const eventTypeSelect = [
  {value: 10, label: "进程执行"},
  {value: 11, label: "进程拦截"},
  {value: 20, label: "USB接入"},
  {value: 21, label: "USB拦截"},
  {value: 30, label: "网卡发现"},
  {value: 31, label: "网卡拦截"},
  {value: 40, label: "非法外联检测"},
  {value: 41, label: "非法外联拦截"},
  {value: 50, label: "BAT执行"},
  {value: 51, label: "BAT阻止"},
  {value: 60, label: "VBS执行"},
  {value: 61, label: "VBS阻止"},
  {value: 80, label: "文件放行"},
  {value: 81, label: "文件修改"},
  {value: 82, label: "文件删除拦截"},
  {value: 83, label: "文件修改拦截"},
  {value: 90, label: "网络接入"},
  {value: 91, label: "网络拦截"},
  {value: 100, label: "CPL执行"},
  {value: 101, label: "CPL阻止"},
  {value: 110, label: "CMD执行"},
  {value: 111, label: "CMD阻止"},
  {value: 120, label: "MSC执行"},
  {value: 121, label: "MSC阻止"},
  {value: 130, label: "MSI执行"},
  {value: 131, label: "MSI阻止"},
  {value: 140, label: "FON执行"},
  {value: 141, label: "FON阻止"},
  {value: 150, label: "WSF执行"},
  {value: 151, label: "WSF阻止"},
  {value: 160, label: "WSH执行"},
  {value: 161, label: "WSH阻止"},
  {value: 170, label: "REG执行"},
  {value: 171, label: "REG阻止"},
  {value: 180, label: "PS1执行"},
  {value: 181, label: "PS1阻止"},
  {value: 200, label: "控件注册"},
  {value: 201, label: "控件阻止"},
  {value: 202, label: "服务注册"},
  {value: 203, label: "服务阻止"},
  {value: 1110, label: "安全基线检测"},
  {value: 1111, label: "安全基线拦截"},
];
// 表格 ref
const groupAuditLogTable = ref();
// 表格数据存放
const groupAuditLogTableData = ref();
// 表格数据数量存放
const groupAauditLogTotal = ref(0);
// 表格列数据设置
const groupAuditLogFields = reactive([
  {name: "host_name", label: "设备名称"},
  {name: "host", label: "设备IP"},
  {name: "operation_name", label: "执行对象"},
  // { name: "user", label: "用户名称" },
  {name: "event_type", label: "事件类型"},
  {name: "@timestamp", label: "接收时间"},
  // { name: "repeat", label: "重复次数" },
  // { name: "operationFeature", label: "指纹特征" },
]);
const headerOperation = () => {
  return [
    {name: "导出", ev: downloadWhitelist, icon: Download},
  ];
};
const downloadWhitelist = (countParams, searchParams) => {
  let groupAuditLogParams = {
    categoryId: treeStore.treeLinkedTableCategoryId, //日志类型
    startTime: groupTimeString.value[0] ? groupTimeString.value[0] : "",
    endTime: groupTimeString.value[1] ? groupTimeString.value[1] : "",
    key: auditAllSearch.value, //模糊查询
  };
  return (window.location.href =
      window.location.protocol +
      "//" +
      window.location.host + URI +
      `logManager/guardLogsExport?$limit=10000&$skip=0&categoryId=${groupAuditLogParams.categoryId}&startTime=${groupAuditLogParams.startTime}&endTime=${groupAuditLogParams.endTime}&key=${groupAuditLogParams.key}`+(eventType.value ? '&type='+eventType.value : ''));
};
// 表格数据请求
const getGroupAuditLog = async (countParams, searchParams, search, isSearch) => {
  console.log(treeStore.treeLinkedTableCategoryId);
  if (treeStore.treeLinkedTableCategoryId == null) {
    return;
  }
  let groupAuditLogParams = isSearch ? {
    $skip: searchParams.$page,
    $limit: searchParams.$limit,
    categoryId: treeStore.treeLinkedTableCategoryId, 
    startTime: "",
    endTime: "",
  } : {
    $limit: searchParams.$limit,
    $skip: searchParams.$page * searchParams.$limit,
    categoryId: treeStore.treeLinkedTableCategoryId, 
    startTime: groupTimeString.value[0] ? groupTimeString.value[0] : "",
    endTime: groupTimeString.value[1] ? groupTimeString.value[1] : "",
    key: auditAllSearch.value, //模糊查询
  };
  if(eventType.value && !isSearch){
    groupAuditLogParams.type = eventType.value
  }
  let getGuardLogsDate = await req_getGuardLogs(groupAuditLogParams);
  let getGuardLogsCountDate = await req_getGuardLogsCount(groupAuditLogParams);
  groupAauditLogTotal.value = getGuardLogsCountDate.data;
  const filterEventType = (type) => {
    if (type) {
      let arr = eventTypeSelect.filter((item) => {
        return item.value == type;
      });
      return arr ? arr[0].label : null;
    }
  };
  groupAuditLogTableData.value = getGuardLogsDate.data.map((item) => {
    return {
      ...item,
      operationFeature: item.operationFeature ? item.operationFeature : "暂无",
      event_type: filterEventType(item.event_type),
    };
  });
  groupAuditLogTable.value?.finish();
  treeStore.treeLinkedTableRef = groupAuditLogTable;
};
// 时间组件选择函数
const groupTimeChange = () => {
  groupTimeString.value[0] = moment(groupTimeString.value[0]).format(
      "YYYY-MM-DD HH:mm:ss"
  );
  groupTimeString.value[1] = moment(groupTimeString.value[1]).format(
      "YYYY-MM-DD HH:mm:ss"
  );
};
const formSubmit = () => {
  groupAuditLogTable.value.getTableData()
}
</script>

<style lang="scss" scoped>
.filter-box {
  position: relative;
  margin: 0 0 16px 0;
  padding: 24px 24px 8px 24px;
  background-color: #fff;
  border-radius: 6px;
}
.form-submit{
  position: absolute;
  right: 24px;
  top: 24px;
}
</style>
